<template>
  <div class="life-arrange">
    <CustomTable ref="tableRef" type="index" height="965rem" v-model:form="searchForm" :tableHeader="tableHeader" api="/znjszd3/ht/yrsh/getYrshList" lastColMinWidth="20%" :showPagination="false">
      <template v-slot:tableTop="{ rows }">
        <el-button type="primary" class="add" plain @click="add">
          <el-icon><Plus /></el-icon>
          新增</el-button
        >
      </template>
      <template v-slot:bflx="{ row }">
        {{ row.bflx == 'music' ? '音乐' : '语音' }}
      </template>
      <template v-slot:htplay="{ row }">
        {{ row.htplay == 'N' ? '否' : '是' }}
      </template>
      <template v-slot:lastColumn="{ row }">
        <div class="btn">
          <el-button type="primary" plain @click.stop="edit(row)">
            <el-icon><EditPen /></el-icon>
            修改</el-button
          >
          <el-button type="danger" plain @click.stop="del(row)">
            <el-icon><Delete /></el-icon>
            删除</el-button
          >
          <el-button v-if="row.bflx == 'music'" type="primary" plain @click.stop="play(row)">
            <el-icon><EditPen /></el-icon>
            播放</el-button
          >
        </div>
      </template>
    </CustomTable>
    <CustomDialog :title="(openType == 'add' ? '新增' : '修改') + '事件'" v-model:dialogVisible="dialogVisible" width="25%" height="400rem" @confirm="confirm">
      <CustomForm ref="ruleFormRef" v-model:form="form" :editable="true" columns="1"></CustomForm>
    </CustomDialog>
    <CustomDialog title="播放语音 / 音乐" confirmText="关闭" v-model:dialogVisible="playDialogVisible" width="30%" height="240rem" @confirm="playDialogVisible = false">
      <audio :src="audioSrc" controls></audio>
    </CustomDialog>
  </div>
</template>

<script setup name="lifeArrange">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http, fillData } from '@/utils/index'
import { stores } from '@/stores/index.js'
const userStore = stores.useUserStore()
const props = defineProps({})
const tableRef = ref()
const dialogVisible = ref(false)
const playDialogVisible = ref(false)
const audioSrc = ref('')
const openType = ref('add')
const rowData = ref({})
const searchForm = ref({
  hdmc: ''
})
const form = ref({
  hdmc: '',
  rid: '', //播放音乐
  bfcs: 1,
  qdsj: '',
  htplay: 'N'
})
const tableHeader = ref([
  {
    key: 'hdmc',
    label: '生活名称',
    width: '9%'
  },
  {
    key: 'bflx',
    label: '播放类型',
    width: '7%'
  },
  {
    key: 'mc',
    label: '提示音名称',
    width: '13%'
  },
  {
    key: 'qdsj',
    label: '生活时间',
    width: '7%'
  },
  {
    key: 'bfcs',
    label: '播放次数',
    width: '7%'
  },
  {
    key: 'htplay',
    label: '管教端同时播放',
    width: '9%'
  },
  {
    key: 'bgsj',
    label: '操作时间',
    width: '11%'
  },
  {
    key: 'bgr',
    label: '操作人',
    width: '9%'
  }
])
const confirm = (params) => {
  if (openType.value == 'add') {
    http('/znjszd3/ht/yrsh/addYrsh', 'post', params, false).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
        dialogVisible.value = false
      }
    })
  } else {
    http('/znjszd3/ht/yrsh/updateYrshById', 'post', Object.assign({ id: rowData.value.id }, params), false).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
        dialogVisible.value = false
      }
    })
  }
}
const play = (row) => {
  playDialogVisible.value = true
  audioSrc.value = row.musicurl
}
const add = () => {
  openType.value = 'add'
  dialogVisible.value = true
}
const edit = (row) => {
  rowData.value = row
  openType.value = 'edit'
  fillData(form.value, row)
  dialogVisible.value = true
}
const del = (row) => {
  ElMessageBox.confirm('确定要删除该条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http(
        '/znjszd3/ht/yrsh/delYrshById',
        'post',
        {
          id: row.id
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          ElMessage.success(res.message[0])
          tableRef.value.getData()
        }
      })
    })
    .catch(() => {})
}
</script>
<style lang="scss" scoped>
.life-arrange {
  ::v-deep(.custom-form) {
    .el-form-item.bfcs {
      .el-form-item__content .el-input-number {
        min-width: 30%;
      }
    }
    .el-form-item.htplay .el-form-item__content {
      padding-left: 30px;
    }
  }
  ::v-deep(.custom-dialog) {
    audio {
      margin-top: 10px;
      width: 100%;
    }
  }
  .btn {
    width: 80%;
    margin: auto;
    text-align: left;
  }
}
</style>
